<template>
  <div class="myContainer" >
    <el-row class="myTitleBorderBottom">
      <el-col :span="12" class="myLineHeight_40px">{{this.title}}</el-col>
      <el-col :span="12" class="myTextAlignRight">                   
         <el-button type="primary" class="myBgGreen" @click="add">新增</el-button>
      </el-col>
    </el-row>
    <el-row class="myMarginTop_10px" :gutter="10">    	
      <el-col :span="6">
        <template>
          <el-cascader
            placeholder="全部项目/小区"
            :options="regionOptions"
            v-model="regionOptSelected"
            ></el-cascader>
          </el-select>
        </template>
      </el-col>
      <el-col :span="3">
        <template>
          <el-select 
            v-model="affairStatus"
            clearable
            placeholder="事务状态">
            <el-option
              v-for="item in affairStatusList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-col>
       <el-col :span="6">
        <el-date-picker
          v-model="time"
          type="daterange"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-col>
      <el-col :span="5">
        <el-input placeholder="请输入工单号" v-model="kw"></el-input>
      </el-col>
      <el-col :span="3">
        <el-button type="primary" class="myBgGreen" @click="search">查 询</el-button>
      </el-col>
    </el-row>
    
    <el-tabs type="border-card" v-model="workList" class="myMarginTop_10px" @tab-click="qiehuan">
     <el-tab-pane label="报修类" name="w1">
     	<el-row class="myMarginTop_10px">
      <el-col :span="24">
        <el-table
          ref="multipleTable"
          :data="list"
          :border = true
          :stripe = true
          style="width: 100%" >
          <el-table-column
            type="index"
            label="序号"
            width="55">
          </el-table-column>
          <el-table-column
            prop="id"
            label="工单号"
            >
          </el-table-column>
                
          <el-table-column  
          	prop="affairTypeName"
            label="类别"
            >     
          </el-table-column>
           
            <el-table-column
            prop="createTime"
            label="上报时间"
            >             
          </el-table-column>
           
          <el-table-column
            prop="commitType"
            label="事件来源"
            >       
            <template scope="scope">
                <span>{{scope.row.commitType | commitTypeText}}</span>
              </template>
          </el-table-column>
         
          <el-table-column
            prop="affairStatus"
            label="事务状态"
            >   
             <template scope="scope">
                <span>{{scope.row.affairStatus | affairStatusText}}</span>
              </template>
          </el-table-column>
         
          <el-table-column
              prop="affair_status"
              label="是否逾期">
               <template scope="scope">
              <span v-if="scope.row.affair_status==0">是</span>
              <span class="myColorRed" v-else>否</span>
            </template>
            </el-table-column>               
         
         <el-table-column
            prop="commitUserName"
            label="上报人"
          >            
          </el-table-column>
          
          <el-table-column
            prop="affairAddr"
            label="联系地址"
          >            
          </el-table-column>
          
          <el-table-column
            prop="dealUserName"
            label="处理人"
          >            
          </el-table-column>
         
          <el-table-column
            label="操作"
            width="150">
            <template scope="scope">
            	<el-button @click="getDetail(scope.row.id)" class="look" type="text" size="small">查看</el-button> 
              <span v-if="scope.row.affairStatus==1||scope.row.affairStatus==2">
                | <el-button class="look" type="text" size="small" @click="onAssign(scope.row.id)">指派</el-button> 
              </span>
              <span v-if="scope.row.affairStatus==2||scope.row.affairStatus==3||scope.row.affairStatus==6">
                | <el-button @click="theEnd(scope.row.id)" class="look" type="text" size="small">强制结束</el-button> 
              </span>        
                <!-- <el-button @click="dy(scope.row.id)" class="look" type="text" size="small">打印</el-button> -->
            </template>
          </el-table-column>
        </el-table>

        <div class="block">                    
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page_num1"
            :page-sizes="[10, 15]"
            :page-size="page_size1"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </el-col>
    </el-row>
 	</el-tab-pane>	
     		
 	<el-tab-pane label="报事类" name="w2">	
     	<el-row class="myMarginTop_10px">
      <el-col :span="24">
        <el-table
          ref="multipleTable"
          :data="list"
          :border = true
          :stripe = true
          style="width: 100%" >
          <el-table-column
            type="index"
            label="序号"
            width="55">
          </el-table-column>
          <el-table-column
            prop="id"
            label="工单号"
            >
          </el-table-column>
                
           <el-table-column  
          	prop="affairTypeName"
            label="类别"
            >     
          </el-table-column>
           
            <el-table-column
            prop="createTime"
            label="上报时间"
            >             
          </el-table-column>
           
          <el-table-column
            prop="commitType"
            label="事件来源"
            >       
            <template scope="scope">
                <span>{{scope.row.commitType | commitTypeText}}</span>
              </template>
          </el-table-column>
         
          <el-table-column
            prop="affairStatus"
            label="事物状态"
            >   
             <template scope="scope">
                <span>{{scope.row.affairStatus | affairStatusText}}</span>
              </template>
          </el-table-column>
         
         <el-table-column
              prop="affair_status"
              label="是否逾期">
               <template scope="scope">
              <span v-if="scope.row.affair_status==0">是</span>
              <span class="myColorRed" v-else>否</span>
            </template>
            </el-table-column>               
         
         <el-table-column
            prop="commitUserName"
            label="上报人"
          >            
          </el-table-column>
          
          <el-table-column
            prop="affairAddr"
            label="联系地址"
          >            
          </el-table-column>
          
          <el-table-column
            prop="dealUserName"
            label="处理人"
          >            
          </el-table-column>
         
          <el-table-column
            label="操作"
            width="150">
            <template scope="scope">
              <el-button @click="getDetail(scope.row.id)" class="look" type="text" size="small">查看</el-button> 
              <span v-if="scope.row.affairStatus==1||scope.row.affairStatus==2">
                | <el-button class="look" type="text" size="small" @click="onAssign(scope.row.id)">指派</el-button> 
              </span>
              <span v-if="scope.row.affairStatus==2||scope.row.affairStatus==3||scope.row.affairStatus==6">
                | <el-button @click="theEnd(scope.row.id)" class="look" type="text" size="small">强制结束</el-button> 
              </span>        
                <!-- <el-button @click="dy(scope.row.id)" class="look" type="text" size="small">打印</el-button> -->
            </template>
          </el-table-column>
        </el-table>

        <div class="block">                    
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page_num2"
            :page-sizes="[10, 15]"
            :page-size="page_size2"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </el-col>
    </el-row>
    </el-tab-pane> 
    
   	<el-tab-pane label="投诉" name="w3">	
     	<el-row class="myMarginTop_10px">
      <el-col :span="24">
        <el-table
          ref="multipleTable"
          :data="list"
          :border = true
          :stripe = true
          style="width: 100%" >
          <el-table-column
            type="index"
            label="序号"
            width="55">
          </el-table-column>
          <el-table-column
            prop="id"
            label="工单号"
            >
          </el-table-column>
                
          <el-table-column  
          	prop="affairTypeName"
            label="类别"
            >     
          </el-table-column>
           
            <el-table-column
            prop="createTime"
            label="上报时间"
            >             
          </el-table-column>
           
         <el-table-column
            prop="commitType"
            label="事件来源"
            >       
            <template scope="scope">
                <span>{{scope.row.commitType | commitTypeText}}</span>
              </template>
          </el-table-column>
         
           <el-table-column
            prop="affairStatus"
            label="事物状态"
            >   
             <template scope="scope">
                <span>{{scope.row.affairStatus | affairStatusText}}</span>
              </template>
          </el-table-column>
         
         <el-table-column
              prop="affair_status"
              label="是否逾期">
               <template scope="scope">
              <span v-if="scope.row.affair_status==0">是</span>
              <span class="myColorRed" v-else>否</span>
            </template>
            </el-table-column>             
         
         <el-table-column
            prop="commitUserName"
            label="上报人"
          >            
          </el-table-column>
          
          <el-table-column
            prop="affairAddr"
            label="联系地址"
          >            
          </el-table-column>
          
          <el-table-column
            prop="dealUserName"
            label="处理人"
          >            
          </el-table-column>
         
          <el-table-column
            label="操作"
            width="150">
            <template scope="scope">
              <el-button @click="getDetail(scope.row.id)" class="look" type="text" size="small">查看</el-button> 
              <span v-if="scope.row.affairStatus==1||scope.row.affairStatus==2">
                | <el-button class="look" type="text" size="small" @click="onAssign(scope.row.id)">指派</el-button> 
              </span>
              <span v-if="scope.row.affairStatus==2||scope.row.affairStatus==3||scope.row.affairStatus==6">
                | <el-button @click="theEnd(scope.row.id)" class="look" type="text" size="small">强制结束</el-button> 
              </span>        
                <!-- <el-button @click="dy(scope.row.id)" class="look" type="text" size="small">打印</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <div class="block">                    
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page_num3"
            :page-sizes="[10, 15]"
            :page-size="page_size3"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </el-col>
    </el-row>
    </el-tab-pane>  
    
    	<el-tab-pane label="查询咨询类" name="w4">	
     	<el-row class="myMarginTop_10px">
      <el-col :span="24">
        <el-table
          ref="multipleTable"
          :data="list"
          :border = true
          :stripe = true
          style="width: 100%" >
          <el-table-column
            type="index"
            label="序号"
            width="55">
          </el-table-column>
          <el-table-column
            prop="id"
            label="工单号"
            >
          </el-table-column>
                
          <el-table-column  
          	prop="affairTypeName"
            label="类别"
            >     
          </el-table-column>
           
            <el-table-column
            prop="createTime"
            label="上报时间"
            >             
          </el-table-column>
           
          <el-table-column
            prop="commitType"
            label="事件来源"
            >       
            <template scope="scope">
                <span>{{scope.row.commitType | commitTypeText}}</span>
              </template>
          </el-table-column>
         
           <el-table-column
            prop="affairStatus"
            label="事物状态"
            >   
             <template scope="scope">
                <span>{{scope.row.affairStatus | affairStatusText}}</span>
              </template>
          </el-table-column>
         
          <el-table-column
              prop="affair_status"
              label="是否逾期">
               <template scope="scope">
              <span v-if="scope.row.affair_status==0">是</span>
              <span class="myColorRed" v-else>否</span>
            </template>
            </el-table-column>             
         
         <el-table-column
            prop="commitUserName"
            label="上报人"
          >            
          </el-table-column>
          
          <el-table-column
            prop="affairAddr"
            label="联系地址"
          >            
          </el-table-column>
          
          <el-table-column
            prop="dealUserName"
            label="处理人"
          >            
          </el-table-column>
         
          <el-table-column
            label="操作"
            width="150">
            <template scope="scope">
              <el-button @click="getDetail(scope.row.id)" class="look" type="text" size="small">查看</el-button>     
                <!-- <el-button @click="dy(scope.row.id)" class="look" type="text" size="small">打印</el-button> -->
            </template>
          </el-table-column>
        </el-table>

        <div class="block">                    
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page_num4"
            :page-sizes="[10, 15]"
            :page-size="page_size4"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </el-col>
    </el-row>
    </el-tab-pane> 
    
    	<el-tab-pane label="其他类" name="w5">	
     	<el-row class="myMarginTop_10px" >
      <el-col :span="24">
        <el-table
          ref="multipleTable"
          :data="list"
          :border = true
          :stripe = true
          style="width: 100%" >
          <el-table-column
            type="index"
            label="序号"
            width="55">
          </el-table-column>
          <el-table-column
            prop="id"
            label="工单号"
            >
          </el-table-column>
                
          <el-table-column  
          	prop="affairTypeName"
            label="类别"
            >     
          </el-table-column>
           
            <el-table-column
            prop="createTime"
            label="上报时间"
            >             
          </el-table-column>
           
         <el-table-column
            prop="commitType"
            label="事件来源"
            >       
            <template scope="scope">
                <span>{{scope.row.commitType | commitTypeText}}</span>
              </template>
          </el-table-column>
         
          <el-table-column
            prop="affairStatus"
            label="事物状态"
            >   
             <template scope="scope">
                <span>{{scope.row.affairStatus | affairStatusText}}</span>
              </template>
          </el-table-column>
         
          <el-table-column
              prop="affair_status"
              label="是否逾期">
               <template scope="scope">
              <span v-if="scope.row.affair_status==0">是</span>
              <span class="myColorRed" v-else>否</span>
            </template>
            </el-table-column>                
         
         <el-table-column
            prop="commitUserName"
            label="上报人"
          >            
          </el-table-column>
          
          <el-table-column
            prop="affairAddr"
            label="联系地址"
          >            
          </el-table-column>
          
          <el-table-column
            prop="dealUserName"
            label="处理人"
          >            
          </el-table-column>
         
          <el-table-column
            label="操作"
            width="150">
            <template scope="scope">
              <el-button @click="getDetail(scope.row.id)" class="look" type="text" size="small">查看</el-button> 
                <!-- <el-button @click="dy(scope.row.id)" class="look" type="text" size="small">打印</el-button> -->
            </template>
          </el-table-column>
        </el-table>

        <div class="block">                    
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page_num5"
            :page-sizes="[10, 15]"
            :page-size="page_size5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </el-col>
    </el-row>
    </el-tab-pane> 
    
  	</el-tabs>
  	
    <!--打印弹框内容-->
    <el-dialog      
      class="myRoleDialog"
      width="50%"
      :visible.sync="newDeptDialogVisible"
      
      > 
      <el-row class="myPaddingBottom_10px">                     	
    <div id="subOutputRank-print">
    	
    	<table class="myTable">
    		 <caption class="head_1">重庆新鸥鹏物业维修单</caption>		 	    
		 	 <caption class="head_2">鸥鹏k城物业服务中心</caption>
          <tr><!--第一行start-->
            <td class="w-1">
              <span class="myState">服务类型</span>  
            </td>
            <td class="w-3">
              <span class="myState">公区报事报修</span>  
            </td>
            <td class="w-4">
              <span class="myState">住户名称</span>  
            </td>
            <td class="w-2">              
              <span class="myState" v-html="charge_user_id"></span>
            </td>
            <td class="w-1">
              <span class="myState">报修时间</span>  
            </td>
            <td colspan="2">
              <span class="myState" v-html="dist_time"></span>
            </td>            
          </tr>
          <tr><!--第二行start-->
             <td >
              <span class="myState">单元地址</span>  
            </td>
            <td >
              <span class="myState" v-html="house_id"></span>  
            </td>
            <td >
              <span class="myState">联系电话</span>  
            </td>
            <td >
              <span class="myState" v-html="commit_user_tel"></span>  
            </td>
            <td >
              <span class="myState">预约服务时间</span>  
            </td>
            <td class="w-h" colspan="2">
              <span class="myState" v-html=""></span>  
            </td>       
          </tr>
          <tr> <!--第三行start-->
             <td  rowspan="2">
              <span class="myState">维修内容</span>  
             </td>
             <td  colspan="3" rowspan="2">
              <span class="myState" v-html="note"></span>  
             </td>                    
             <td>
              <span class="myState">开始维修时间</span>  
             </td>
             <td class="w-h" colspan="2">
              <span class="myState" v-html="deal_finish_time"></span>  
             </td>         
           </tr>
           <tr>                  
             <td >
               <span class="myState">完成维修时间</span>  
             </td>
             <td class="w-h" colspan="2">
              <span class="myState" v-html="affair_finish_time"></span>  
             </td>       
           </tr>
           <tr> <!--第四行start-->
             <td >
               <span class="myState">开单人</span>  
             </td>
             <td>
               <span class="myState" v-html=""></span>  
             </td>
             <td>
               <span class="myState">开单时间</span>  
             </td>
             <td>
               <span class="myState" v-html=""></span>  
             </td>
             <td rowspan="4">
               <span class="myState">维修费用</span>  
             </td>
             <td class="w-e">
               <span class="myState" v-html="">人工费</span>  
             </td>
             <td>
               <span class="myState" v-html=""></span>  
             </td>
           </tr>
           <tr> <!--第五行start-->
             <td >
               <span class="myState">收单人</span>  
             </td>
             <td>
                <span class="myState" v-html=""></span>  
             </td>
             <td>
               <span class="myState">收单时间</span>  
             </td>
             <td>
               <span class="myState" v-html=""></span>  
             </td>
             <td class="w-e">
               <span class="myState">材料费</span>  
             </td>
             <td>
               <span class="myState" v-html=""></span>  
             </td>
          </tr>
          <tr> <!--第六行start-->
            <td rowspan="2">
              <span class="myState">维修结果</span>  
            </td>
            <td colspan="3" >
              <span class="myState" v-html=""></span>  
            </td>           
            <td class="w-e">
              <span class="myState">其他费用</span>  
            </td>
            <td>
              <span class="myState" v-html=""></span>  
            </td>
       </tr>
        <tr>  <!--第七行start-->         
            <td colspan="3" >
              <span class="myState" v-html=""></span>  
            </td>                    
            <td class="w-e">
              <span class="myState">共计金额</span>  
            </td>
            <td>
              <span class="myState" v-html=""></span>  
            </td>      
         </tr>
        <tr>  <!--第八行start-->
             <td  colspan="4" >
              <span class="myState">顾客评论和确认：1-非常满意  、2-满意 3-一般 、 4-不满意</span>  
            </td>                       
            <td >
              <span class="myState">顾客签名</span>  
            </td>
            <td  colspan="2">
              <span class="myState" v-html=""></span>  
            </td>       
         </tr>
         <tr> <!--第九行start-->
             <td  colspan="4" >
              <span class="myState">回访：<span class="myState" v-html=""></span></span>  
            </td>                       
            <td >
              <span class="myState">维修人员</span>  
            </td>
            <td  colspan="2">
              <span class="myState" v-html=""></span>  
            </td>       
         </tr>
         <tr>  <!--第十行start-->
             <td  colspan="7" >
              <span class="myState">备注：<span class="myState"></span></span>  
            </td>                                   
          </tr>
        </table>
    </div>        
     </el-row>
     
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="myBgGreen" @click="newDeptDialogVisible = false">取 消</el-button>
        <el-button type="primary" class="myBgGreen" @click="qrdy">打印</el-button>
      </div>
            
    </el-dialog>
    
    <!-- 强制结束 start -->
    <el-dialog      
      class="myRoleDialog"
      title="强制结束"
      :visible.sync="dialogVisible"> 
      <el-row class="myPaddingBottom_10px"> 
        <el-col :span="5">
          结束原因：
        </el-col>
        <el-col :span="19">
          <el-input placeholder="结束原因" type="textarea" v-model="endReason"></el-input>
        </el-col>
      </el-row>
      <el-row> 
        <el-col :span="5">
          图片信息：
        </el-col>
        <el-col :span="19" class="my">
          <el-upload
            class="upload-demo"
            :action="AlbumUrl"
            :data="postData"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :before-upload="beforeAvatarUpload"
            :file-list="fileList2"
            :limit="3"
            :on-exceed="overFile"
            list-type="picture">
            <el-button type="primary" class="myBgGreen">点击上传</el-button>
          </el-upload> 
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" class="myBgGreen" @click="seva">保 存</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 强制结束 end -->

    <!--指派人员弹出框 start-->
    <el-dialog title="指派处理人员" class="myRoleDialog" :visible.sync="newRoleDialogVisible" >
      <el-row :gutter="10">
        <el-col :span="20">
          <el-input placeholder="输入关键词" v-model="r_kw"></el-input>
        </el-col>
        <el-col :span="4" class="myTextAlignRight">
          <el-button type="primary" class="myBgGreen" @click="onSearchExaminer">查询</el-button>
        </el-col>
      </el-row>
      <div class="myMarginTop_10px">
        <el-tree
          class="myOV_y_400px" 
          ref="dutyDlg"
          v-loading="dutyDlgListLoading"
          :data="dutyDlgList"
          :props="dutyDlgProps"
          node-key="staff_id"
          @check-change="onChange"
          :render-content="renderContent"
          show-checkbox>
        </el-tree>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="newRoleDialogVisible = false">取 消</el-button>
        <el-button type="primary" class="myBgGreen" @click="onAssignSub">提 交</el-button>
      </div>
    </el-dialog>
    <!--指派人员弹出框 end-->
  </div>

</template>

<style scoped>
  .myContainer{
    background: #fff;
    padding: 10px;
  }
  .myTitleBorderBottom{
    color: #000;
    font-weight: 500;
    font-size: 16px;
    border-bottom: 1px solid #dbdbdb;
  }
  .myBgGreen{
    background: #00c2a9;
    border-color: #00c2a9;
    color: #fff;
    margin-top:2px;
  }
  .myBgGreen:hover{
    background: #33ceba;
  }
  .myTextAlignRight{
    text-align: right;
  }
  .myLineHeight_40px{
    line-height: 40px;
  }
  .myMarginTop_10px{
    margin-top: 10px;
  }
  .myPaddingBottom_10px{
    padding-bottom: 10px;
  }
   .myMarginTop_5px{
    margin-top: 5px;
  }
  .myColorRed{
    color: #f00;
  }
  .myLeftMsg{
    line-height: 40px;
    text-align: right;
    padding-right: 10px;
  }
  .myTable{
    width: 800px;
    height: auto;
    border-collapse:collapse;
    font-size: 8px;
    margin: auto;
  }
  .myTable,.myTable tr,.myTable td{
    border:1px solid black;
  }
  .myTable td:nth-child(1){
    text-align: left;
  }
  .myTable td{
    padding: 3px;
  }
  .myTable tr:nth-child(even){
    background: #fafafa;
  }
 .w-1{
  	width:10%;
  }
  .w-2{
  	width:18%;
  }
  .w-3{
  	width:30%;
  }
   .w-4{
  	width:8%;
  }
  .w-e{
  	width:7%;
  }
  .w-h{
  	width:18%;
  }
  .head_1{
  	font-size: 18px;
  	font-weight: bold;margin-bottom: 5px;
  }
  .head_2{
  	font-size: 13px;
  	margin-bottom: 5px;
  	
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border:1px solid #d8dce5;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .myOV_y_400px{
    max-height: 400px;
    min-height: 200px;
    overflow-y:scroll;
    border:1px solid #f2f2f2;
  }
  
  
</style>

<script>
  import { getWorkorderList , Print } from '@/api/entrance_guard';
  import { affairForceStop , setDealuser } from '@/api/affair_setting';
  import { getRegion } from '@/utils/localstorage';
  import { extractAreaIds , onSetArea } from '@/utils/misc';
  import { QINIU_UP_API , QINIU_API } from '@/config/baseUrl';
  import { getQNToken } from '@/api/contentMGT';
  import { getStaffList } from '@/api/staff';
  
  export default {
    data(){
      return{  
        title:"工单管理",    
        list:[],
        is_modifly:false,
        bh:1,

        page_size1: 10, //每页显示多少条
        page_num1: 1, //当前页码
        page_size2: 10, //每页显示多少条
        page_num2: 1, //当前页码
        page_size3: 10, //每页显示多少条
        page_num3: 1, //当前页码
        page_size4: 10, //每页显示多少条
        page_num4: 1, //当前页码
        page_size5: 10, //每页显示多少条
        page_num5: 1, //当前页码
        total:null, //总条数        
        workList:"w1",

        selectedLd:"-1",
        ldList:[],
        building_id:-1,
        regionOptions: [],
        regionOptSelected: [],
        lookObj:{},
        time:[],
        startTime:[],
        endTime:[],
        affairStatus:'',
        affairStatusList:[
          {value:0,label:"工单创建"},
          {value:1,label:"未分配"},
          {value:2,label:"分配待处理"},
          {value:3,label:"处理完成，待评价"},
          {value:4,label:"已评价"},
          {value:5,label:"已完成"},
          {value:6,label:"处理中"},
          {value:7,label:"重新处理"}
        ],        
        charge_user_id:"",
        dist_time:"",
        affair_type:"",
        note:"",
        commit_user_tel:"",
        house_id:"",
        deal_finish_time:"",
        affair_finish_time:"",
                        
        id:null,
        index:null,
        idArr:[],
        area_id: -1,
        pages:1000,
        loading:false,
        multipleSelection: [],
        newDeptDialogVisible:false,
        aaa:"",

        kw:"",
        dialogVisible:false,
        AlbumUrl:QINIU_UP_API,
        dialogImageUrl: '',
        dialogImageUrlList:[], 
        dialogImageList:[],
        fileList2: [],
        saveimgSuccess:"",
        saveimg:[],
        postData:{
          token:""
        },
        endReason:"",
        affairId:"",

        newRoleDialogVisible:false,
        r_kw:"",
        dutyDlgListLoading:false,
        dutyDlgList:[],
        dutyDlgProps: {
          children: 'children',
          label: 'user_name'
        },
        id:"",
        i:0

      }
    },
    filters: {
       affairStatusText: function(value) {
        let src = '';
        switch (value) {
          case 0:
            src = '工单创建';
          break;
          case 1:
            src = '未分配';
          break;
          case 2:
            src = '分配待处理';
          break;
          case 3:
            src = '处理完成，待评价';
          break;
          case 4:
            src = '已评价';
          break;
          case 5:
            src = '已完成';
          break;
         case 6:
            src = '处理中';
          break;  
         case 7:
            src = '重新处理';
          break;
        }
        return src;    
      },     
      commitTypeText: function(value) {
        let src = '';
        switch (value) {          
          case 1:
            src = '业主APP';
          break;
          case 2:
            src = '呼叫中心';
          break;
          case 3:
            src = '管理端';
          break;
          case 4:
            src = '员工APP';
          break;    
          }
        return src;    
      }      
  },
    computed: {
      areaIds() {
        return extractAreaIds(this.regionOptSelected, this.regionOptions);
      }
    },
    mounted(){
      let vm=this;
      document.title = this.title;
      this.regionOptions = getRegion();
      this.regionOptSelected.push(this.regionOptions[0].value,this.regionOptions[0].children[0].value,this.regionOptions[0].children[0].children[0].value);
      
      this.onGetToken();
      
      let gdglxxxConfig=window.sessionStorage.getItem("gdglxxxConfig");
      if(gdglxxxConfig){
        let config=JSON.parse(gdglxxxConfig);
        vm.regionOptSelected=onSetArea(vm.regionOptions,config.area_id);
        vm.affairStatus=config.affairStatus;
        vm.time=config.time;
        vm.kw=config.kw;
        vm.workList=config.workList;
        vm.bh=config.bh;
        vm['page_num'+config.bh] = Number(config.page_num);
        window.sessionStorage.removeItem("gdglxxxConfig");
      }else{
        vm.page_num1 = 1;
      }
      this.fetchList();
    },
    methods:{   	
    	
       fetchList() {
        let vm = this;
        if(vm.time && vm.time.length>0){
          vm.startTime=vm.time[0]+" 00:00:00";
          vm.endTime=vm.time[1]+" 23:59:59";
        }else{
          vm.startTime="";
          vm.endTime="";
        }
        let params = {
        	area_id: vm.areaIds,
          affair_status:vm.affairStatus,
          start_date:vm.startTime,//开始时间
          end_date:vm.endTime,
          affair_type:vm.bh,
          affair_id: vm.kw,
          page_num: vm['page_num'+vm.bh],
          page_size: vm['page_size'+vm.bh]
        }
        vm.loading = true;
        getWorkorderList(params)
        .then(response => {
          let res = response.data;
          vm.list = res.rows;
          vm.total = res.total;
          vm['page_num'+vm.bh] = res.page_num;
          vm['page_size'+vm.bh] = res.page_size;
          vm.loading = false;
        }).catch(error => {
          vm.loading = false;
        });
      },
      
      qiehuan(tab,event){           
    	 let buid =event.target.getAttribute('id');
    	 let bh = buid.charAt(buid.length-1);
       this.bh =bh;
       this.page_num1 = 1;
       this.page_num2 = 1;
       this.page_num3 = 1;
       this.page_num4 = 1;
       this.page_num5 = 1;
    	 this.fetchList();
    	},    
    	
      search() {
        this.fetchList();
      },
      
      handleSizeChange(val) {
        let vm=this;
        vm['page_size'+vm.bh]=val;
        vm.fetchList();
      },
      
      handleCurrentChange(val) {
        let vm=this;
        vm['page_num'+vm.bh]=val;
        vm.fetchList();
      },
               
     dy:function(id){   
     	let vm = this;
      	vm.newDeptDialogVisible = true;     
//    	 vm.llow_val=id;
        Print(id).then(response => {
          let res=response.data;
          vm.affair_type=res.affair_type;
          vm.charge_user_id=res.charge_user_id;
          vm.dist_time=res.dist_time;
          vm.note=res.note;
          vm.commit_user_tel=res.commit_user_tel;
          vm.house_id=res.house_id;
          vm.deal_finish_time=res.deal_finish_time;
          vm.affair_finish_time=res.affair_finish_time;
          
        }).catch(error => {
          console.log("拉取数据失败",error);
        })


 },
      qrdy:function(){
      	        let subOutputRankPrint = document.getElementById('subOutputRank-print');
                console.log(subOutputRankPrint.innerHTML);
                let newContent =subOutputRankPrint.innerHTML;
                let oldContent = document.body.innerHTML;
                document.body.innerHTML = newContent;
                window.print();
                window.location.reload();
                document.body.innerHTML = oldContent;
                return false;      	
      },
      getDetail:function(id){
        let vm=this;
        let gdglxxxConfig={
          area_id:vm.areaIds,
          affairStatus:vm.affairStatus,
          time:vm.time,
          kw:vm.kw,
          workList:vm.workList,
          page_num:vm['page_num'+vm.bh],
          bh:vm.bh
        }
        window.sessionStorage.setItem("gdglxxxConfig",JSON.stringify(gdglxxxConfig));
        vm.$router.push({
          path:'/gdglxxx',
          query: {type: 'info', id:id }
        })
      },
      add:function(){
         this.$router.push({
           path:'/worklistAdd'
         })
      },   

     //----页码---
      handleSelectionChange(val) {
        this.multipleSelection = val;
        if(val.length!=0){
          for(var i = 0;i<val.length;i++){
            this.idArr.push(val[i].area_id)
          }
        }else{
          this.idArr = [];
        }
              
      },
       indexMethod(index) {
          return (this.page_num-1)*this.page_size + index + 1
      },
      theEnd(id){
        this.endReason="";
        this.saveimg=[]; 
        this.fileList2=[]; 
        this.dialogVisible=true;
        this.affairId=id;
      },
      handleRemove(file, fileList) {//移除
        let vm=this;
        vm.saveimg=[];
        for(let i=0; i<fileList.length; i++){
          vm.saveimg.push(fileList[i].response.key);
        }
      },
      handlePreview(file,fileList) {
      },
      handleSuccess(file,fileList){//上传添加成功
        this.saveimg.push(file.key);
      },
      overFile(file,fileList){
        this.$message.info("最多上传3张图片");
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG && !isPNG) {
          this.$message.error('上传图片只能是 JPG/PNG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
        }
        return (isJPG || isPNG) && isLt2M;
      },
      onGetToken(){//拉取七牛token
        let vm=this;
        getQNToken().then(response => {
          let res=response.data.up_token;
          vm.postData.token=res;
        }).catch(error => {
          // console.log("失败")
        })
      },
      seva(){
        let vm=this;
        if(!vm.endReason){
          vm.$message.info("请填写结束原因！");
          return;
        }
        let params={
          deal_result:vm.endReason,
          image_list:vm.saveimg
        }
        affairForceStop(vm.affairId,params).then(response => {
          let res=response.data;
          vm.$message.success("执行成功！");
          vm.fetchList();
          vm.dialogVisible=false;
        }).catch(error => {
          vm.$message.error("执行失败！"+error.response.data.error_msg);
        })
      },
      onAssign(id){//指派执行人
        this.id=id;
        this.fetchStaff();
        this.newRoleDialogVisible = true;
      },
      fetchStaff() {//获取人员列表
        let vm = this;
        this.dutyDlgListLoading = true;
        let params = {
          kw:vm.r_kw,
          is_fuzzy:true,
          page_num: 1,
          page_size: 50,
          ril: 'S',
          area_id:vm.areaIds
        };
        getStaffList(params)
        .then(response => {
          vm.dutyDlgList = response.data.rows;
          // console.log(vm.dutyDlgList)
          vm.dutyDlgListLoading = false;
        })
        .catch(error => {
          vm.dutyDlgListLoading = false;
        })
      },
      onChange(a,b,c){
        let vm=this;
        vm.i++;
        if(vm.i%2==0){
          if(b){
            vm.$refs.dutyDlg.setCheckedKeys([]);
            vm.$refs.dutyDlg.setCheckedKeys([a.staff_id]);
          }else{
            vm.$refs.dutyDlg.setCheckedKeys([]);
          }
        }
      },
      renderContent:function(createElement, { node, data, store }) {
        var vm = this;
        return createElement(
          'div', 
          {
            attrs:{
              style:"width:100%",
              title:`联系方式：${node.data.phone}`
            }
          },
          [
            createElement('span', node.label),
            createElement('span', 
              {attrs:{
                style:"float: right; margin-right: 20px"
              }},
              `${node.data.dept_name}`
            )
          ]
        );
      },
      onSearchExaminer(){
        let vm = this;
        this.dutyDlgListLoading = true;
        let params = {
          kw:vm.r_kw,
          is_fuzzy:true,
          page_num: 1,
          page_size: 50,
          ril: 'S',
          area_id:""
        };
        getStaffList(params)
        .then(response => {
          vm.dutyDlgList = response.data.rows;
          vm.dutyDlgListLoading = false;
        })
        .catch(error => {
          vm.dutyDlgListLoading = false;
        })
      },
      onAssignSub(){
        let vm=this;
        var duty = vm.$refs.dutyDlg.getCheckedNodes();
        if (duty.length > 0) {
          vm.dutyName = duty[0].user_name;
          vm.dutyId = duty[0].staff_id;
        }       
        const params={
          affair_id:vm.id,//事务id,
          dealuser_id:vm.dutyId//人员id
        }
        setDealuser(params).then(response =>{
          let res=response.data;
          vm.fetchList();
          vm.$message.success("执行成功！");
        }).catch(error =>{
          vm.$message.error("执行失败！"+error.response.data.error_msg);
        })
        vm.newRoleDialogVisible = false;
      },
     
    }

  }


</script>

